import { fileURLToPath, URL } from 'node:url'
import { resolve } from "path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import pxToRem from 'postcss-pxtorem'
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import UnoCss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true
  },
  plugins: [
    vue(),
    vueJsx(),
    UnoCss(),
    vueSetupExtend({}),
    // 使用 svg 图标
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), "src/assets/icons")],
      symbolId: "icon-[dir]-[name]"
    }),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia', {
        'naive-ui': [
          'useDialog',
          'useMessage',
          'useNotification',
          'useLoadingBar'
        ]
      }],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      dts: true,
      resolvers: [ElementPlusResolver(), NaiveUiResolver()],
      dirs: ['src/components']
    }),
  ],
  server: {
    host: "0.0.0.0",
    port: 8080,
    open: true,
    cors: true,
    // Load proxy configuration from .env.development
    proxy: {
      '/dev-api': {
        // target: 'http://192.168.20.95:3000',
        target: 'http://localhost:3000',
        changeOrigin: true,
        ws: true,
        rewrite: path => path.replace(new RegExp(`^/dev-api`), ""),
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/style/variables.scss";
          @import "@/style/mixin.scss";`
      }
    },
    postcss: {
      plugins: [
        pxToRem({
          rootValue: 14,
          propList: ['*'],
          exclude: /node_modules/
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
